<template>
  <div class="order-form">
    <el-form
      label-width="160px"
      :model="computedOrder"
      :rules="rules"
      ref="packetOrderForm"
    >
      <div class="block">
        <div class="title">{{ $t('packet.基础信息') }}</div>
        <div class="items">
          <el-form-item
            label="订单号"
            prop="orderId"
          >
            <el-input :disabled="disabledEditOrderId" v-model="computedOrder.orderId"></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="block">
        <div class="title">{{ $t('packet.商品信息') }}</div>
        <div class="items">
          <el-form-item
              :label="$t('packet.发货商品')"
              prop="goodsData"
          >
            <el-button @click="openGoodsListDialog()" type="primary">{{ $t('packet.选择商品') }}</el-button>
            <div class="goods-data">
              <div class="tips">{{ $t('packet.当前所选SKU种数') }}：<span>{{ order.goodsData.length }}</span>   {{ $t('packet.商品数量') }}：<span>{{ order.goodsData.reduce((c,v) => c + v.num, 0)}}</span> </div>
              <goods-data-info
                :goods-data="order.goodsData"
              ></goods-data-info>
            </div>
          </el-form-item>
        </div>
      </div>
      <!--<div class="block">-->
      <!--  <div class="title">{{ $t('packet.包裹信息') }}</div>-->
      <!--  <div class="items">-->
      <!--    <el-form-item-->
      <!--        :label="$t('packet.尺寸（cm）')"-->
      <!--        class="length-items"-->
      <!--    >-->
      <!--      <el-form-item :label="$t('packet.长')" prop="packetLength" label-width="40px">-->
      <!--        <el-input class="sort" v-model="computedOrder.packetLength"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item :label="$t('packet.宽')" prop="packetWidth" label-width="40px">-->
      <!--        <el-input class="sort" v-model="computedOrder.packetWidth"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item :label="$t('packet.高')" prop="packetHeight" label-width="40px">-->
      <!--        <el-input class="sort" v-model="computedOrder.packetHeight"></el-input>-->
      <!--      </el-form-item>-->
      <!--  </el-form-item>-->
      <!--    <el-form-item-->
      <!--        :label="$t('packet.包裹总重量（kg）')"-->
      <!--        prop="packetWeight"-->
      <!--    >-->
      <!--      <el-input class="sort" v-model="computedOrder.packetWeight"></el-input>-->
      <!--    </el-form-item>-->
      <!--    <el-form-item-->
      <!--        :label="$t('packet.签收类型')"-->
      <!--        prop="confirmationCode"-->
      <!--    >-->
      <!--      <el-select v-model="computedOrder.confirmationCode">-->
      <!--        <el-option value="Adult">Adult Signature Required</el-option>-->
      <!--        <el-option value="Direct Signature">Direct Signature Required</el-option>-->
      <!--        <el-option value="Signature">Indirect Signature Required</el-option>-->
      <!--        <el-option value="None">Not Required</el-option>-->
      <!--      </el-select>-->
      <!--    </el-form-item>-->
      <!--  </div>-->
      <!--</div>-->
      <div class="block">
        <div class="title">{{ $t('packet.买家信息') }}</div>
        <div class="items">
          <el-form-item
            label="有无面单"
            prop="shippingType"
          >
            <el-radio-group v-model="computedOrder.shippingType">
              <el-radio :label="0">无面单</el-radio>
              <el-radio :label="1">平台面单</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="computedOrder.shippingType === 0">
            <el-form-item
              :label="$t('packet.收件人')"
              prop="buyerName"
            >
              <el-input v-model="computedOrder.buyerName"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('packet.联系电话')"
              prop="buyerPhone"
            >
              <el-input v-model="computedOrder.buyerPhone"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('packet.邮编')"
              prop="buyerPostalCode"
            >
              <el-input v-model="computedOrder.buyerPostalCode"></el-input>
            </el-form-item>
            <el-form-item :label="$t('packet.地区选项')">
              <el-radio-group v-model="computedOrder.isAddressOperation">
                <el-radio :label="true">{{ $t('packet.手动填写') }}</el-radio>
                <el-radio :label="false">{{ $t('packet.地址库') }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              :label="$t('packet.地区')"
              prop="buyerCity"
              v-if="computedOrder.isAddressOperation === false"
            >
              <Cities
                :value="computedBuyerCity"
                :district="'MX'"
                @selectCity="changeCity"
              ></Cities>
            </el-form-item>
            <el-form-item
              :label="$t('packet.州')"
              prop="operationBuyerState"
              v-if="computedOrder.isAddressOperation === true"
            >
              <el-input v-model="computedOrder.operationBuyerState"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('packet.城市')"
              prop="operationBuyerCity"
              v-if="computedOrder.isAddressOperation === true"
            >
              <el-input v-model="computedOrder.operationBuyerCity"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('packet.详细地址')"
              prop="buyerAddress"
            >
              <el-input v-model="computedOrder.buyerAddress" type="text" :rows="3"></el-input>
            </el-form-item>
          </template>
          <template v-else-if="computedOrder.shippingType === 1">
            <el-form-item
              label="上传面单"
              prop="pdfPath"
            >
              <upload-shipping-file @uploadFileSuccess="uploadFileSuccess" :file="computedOrder.pdfPath"></upload-shipping-file>
            </el-form-item>
          </template>

        </div>
      </div>

      <div class="block">
        <div class="title">{{ $t('packet.其他信息') }}</div>
        <div class="items">
          <el-form-item
              :label="$t('packet.备注')"
              prop="remark"
          >
            <el-input v-model="computedOrder.remark" type="textarea" :rows="3" maxlength="40" show-word-limit></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <goods-list-dialog
      :visible.sync="goodsListDialogVisible"
      :goods-data="order.goodsData"
      @change="changeGoodsData"
    ></goods-list-dialog>
  </div>
</template>

<script>
import GoodsListDialog from "@/views/packetOrders/components/GoodsListDialog.vue";
// import UsCities from "@/views/packetOrders/components/UsCities.vue";
import Cities from "@/views/packetOrders/components/Cities.vue";
import GoodsDataInfo from "@/views/packetOrders/components/GoodsDataInfo.vue";
import UploadShippingFile from "@/views/packetOrders/components/UploadShippingFile.vue";

export default {
  components: {
    UploadShippingFile,
    GoodsDataInfo,
    GoodsListDialog,
    Cities,
  },
  props: {
    order: {
      type: Object,
      default: () => {
        return {
          orderId: '',
          goodsData: [],
          packetWeight: '',
          packetLength: '',
          packetWidth: '',
          packetHeight: '',
          confirmationCode: 'None',
          buyerName: '',
          buyerPhone: '',
          buyerPostalCode: '',
          buyerState: '',
          buyerStateCode: '',
          buyerCity: '',
          buyerAddress: '',
          remark: '',
          isAddressOperation: true,
          operationBuyerState: '',
          operationBuyerCity: '',
        }
      }
    },
    disabledEditOrderId: {
      type: Boolean,
      default: false,
    }
  },
  computed: {
    computedOrder: {
      get() {
        console.log('this.order', this.order);
        return this.order
      },
      set(val) {
        this.$emit('update:order', val)
      }
    },
    computedBuyerCity() {
      return this.computedOrder.buyerCity ? [this.computedOrder.buyerState, this.computedOrder.buyerCity] : [];
    },
  },
  data() {
    let rules = {
      orderId: [
        { required: true, message: this.$t('packet.请输入订单号'), trigger: 'blur' },
      ],
      goodsData: [
        { required: true, message: this.$t('packet.请选择发货商品'), trigger: 'blur' },
      ],
      packetLength: [
        { required: true, message: this.$t('packet.请输入包裹长度'), trigger: 'blur' },
      ],
      packetWidth: [
        { required: true, message: this.$t('packet.请输入包裹宽度'), trigger: 'blur' },
      ],
      packetHeight: [
        { required: true, message: this.$t('packet.请输入包裹高度'), trigger: 'blur' },
      ],
      packetWeight: [
        { required: true, message: this.$t('packet.请输入包裹重量'), trigger: 'blur' },
      ],
      buyerName: [
        { required: true, message: this.$t('packet.请输入收件人'), trigger: 'blur' },
      ],
      buyerPhone: [
        { required: true, message: this.$t('packet.请输入联系电话'), trigger: 'blur' },
      ],
      buyerPostalCode: [
        { required: true, message: this.$t('packet.请输入邮编'), trigger: 'blur' },
      ],
      buyerCity: [
        { required: true, message: this.$t('packet.请选择地区') },
      ],
      buyerAddress: [
        { required: true, message: this.$t('packet.请输入详细地址'), trigger: 'blur' },
      ],
      pdfPath: [
        { required: true, message: '请上传面单文件'  },
      ],
      operationBuyerState:[
        { required: true, message: this.$t('packet.请填写州') },
      ],
      operationBuyerCity:[
        { required: true, message: this.$t('packet.请填写城市') },
      ],
    };

    return {
      goodsListDialogVisible: false,
      rules: rules,
    }
  },
  created() {

  },
  methods: {
    openGoodsListDialog() {
      this.goodsListDialogVisible = true;
    },
    changeGoodsData(goodsData) {
      this.order.goodsData = goodsData;
      if (goodsData.length === 1) {
        this.computedOrder.packetLength = goodsData[0].length;
        this.computedOrder.packetWidth = goodsData[0].width;
        this.computedOrder.packetHeight = goodsData[0].height;
        this.computedOrder.packetWeight = goodsData[0].weight;
      }
    },
    changeCity(value) {
      this.computedOrder.buyerState = value.buyerState;
      this.computedOrder.buyerCity = value.buyerCity;
      this.computedOrder.buyerStateCode = value.buyerStateCode;
    },
    checkForm() {
      return new Promise((resolve, reject) => {
        this.$refs.packetOrderForm.validate(valid => {
          if (valid) {
            if(this.computedOrder.shippingType !== 0 && this.computedOrder.pdfPath === ''){
              this.$message.error('请上传面单文件');
              reject();
              return;
            }
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    uploadFileSuccess(file){
      this.computedOrder.pdfPath = file
    },
  }
}
</script>

<style scoped lang="less">
.order-form{
  .block{
    margin-bottom: 42px;
    .title{
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .items{
      display: flex;
      flex-wrap: wrap;
      .length-items /deep/ .el-form-item__content{
        display: flex;
        justify-content: flex-start;
        .el-form-item{
          width: 200px;
        }
      }
      .el-form-item{
        width: 60%;
        margin-bottom: 20px;
        .el-input{
          width: 100%;
        }
        .el-select{
          width: 100%;
        }
        .sort{
          width: 120px;
        }
      }

    }
  }
  .goods-data{
    padding: 20px 0 0;
    .tips{
      color: #818181;
      margin-bottom: 10px;
      span{
        color: #FC541E;
      }
    }
  }
}
</style>
